<template>
  <div class="contain">
    <div class="tab">
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane
          label="单元详情"
          name="menu"
          style="background-color: white"
        >
          <div class="v" >
            <span>小区名称：{{ detail.communityname }}</span>
            <br />
            <span>单元名称：{{ detail.unitname }}</span>
            <br />
            <span>栋数：{{ detail.unitnum }}</span>
            <br />
            <span v-if="detail.unitstatus == 2">状态：未建成</span>
            <span v-if="detail.unitstatus == 1">状态：已建成</span>
            <br />
            <span>咨询问候：{{ detail.unitcontext }}</span>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="rightBtn">
      <el-button type="primary" @click="backhome" class="el-icon-back"
        >返回</el-button
      >
      <br />
      <el-button type="primary" @click="toEdit" class="el-icon-circle-check"
        >编辑</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "menuData",
  data() {
    return {
      detail : [],
      form: {
        communityName: "",
        buildingNumber: "",
        unitName: "",
        unitnum: "",
        unitstatus: "",
        greeting: "",
        unitcontext: "",
      },

      activeName: "menu",
      tableData: [],
      iPagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: [7, 10, 20, 50],
        total: 0,
        page: 0,
        pageSize: 10,
      },
      loading: false,
    };
  },
  created() { 
    this.getRowDate();
  },
  mounted() {
    // console.log(this.$router.query.id)
    // this.getMenuData();
  },
  methods: {
    
    getRowDate(){
        const id = this.$route.query.id
        console.log(id)
        this.$Axios({
        url: "/house/getDetailId",
        method: "get",
        data: {
          id : id
        },
        success: (result) => {
          this.detail = result[0]
          this.$message({
            showClose: true,
            message: "成功",
            type: "success",
          });
        },
        error: (error) => {
          this.$message({
            showClose: true,
            message: "失败，请检查输入信息是否正确",
            type: "error",
          });
        },
      })
    },
    backhome() {
      this.$router.push({ path: "/house" });
    },
    toEdit(){
      this.$router.push({ path: "/house/add", 
        query: { id: this.$route.query.id }
      });
    },
    submitForm() {
      // /house/addunitList
      this.$Axios({
        url: "/house/addunitList",
        method: "post",
        data: {
          communityname: this.form.communityName,
          unitname: this.form.unitName,
          unitnum: this.form.unitnum,
          unitstatus: this.form.unitstatus,
          unitcontext: this.form.unitcontext,
          token: localStorage.getItem("token"),
        },
      })
        .then(() => {
          this.$message({
            showClose: true,
            message: "成功",
            type: "success",
          });
          this.$router.push({ path: "/house" });
        })
        .catch(() => {});
      console.log("提交表单:", this.form);
    },
    resetForm() {
      this.$refs.form.resetFields();
    }, 
  },
};
</script>

<style scoped>
.listDiv span{
    display: inline-block;
    height: 40px;
    line-height: 150px;
}
.block {
  float: right;
  margin-top: 10px;
}
.el-button {
  width: 32%;
  color: #fff;
  /* font-size: 12px; */
  background-color: #20a0ff;
  border-color: #20a0ff;
  margin-left: 34%;
}
.rightBtn {
  position: fixed;
  right: 40px;
  top: 290px;
}
.rightBtn .el-button {
  width: 60px;
  margin: 5px;
}
.v span{
  display: block;
  margin-left: 15px;
  line-height: 20px;
}
</style>